<template>
  <a-modal :open="true" :closable="false">
    <template #title>
      <div>
        <slot name="title">
          <y-icon :style="style" icon="fa-solid fa-info-circle mr-2"></y-icon>

          <span>{{ title }}</span>
        </slot>
      </div>
    </template>
    <slot name="default"></slot>
    <template #footer>
      <div>
        <a-button @click="handleCancel">取消</a-button>
        <a-button type="primary" @click="handleConfirm">确定</a-button>
      </div>
    </template>
  </a-modal>
</template>

<script setup>
defineOptions({
  name: 'YModal',
});
const props = defineProps({
  title: {
    type: String,
    default: 'Title',
  },
  type:{
    type: String,
    default: 'info',
  }
});

const style = computed(()=>{
  const colorMapping = {
    info:'var(--color-info)',
    success:'var(--color-success)',
    warning:'var(--color-warning)',
    error:'var(--color-error)',
  }
  return {
    color:colorMapping[props.type] || colorMapping.info,
  }
})



const emit = defineEmits(['confirm', 'cancel', 'close']);
const handleCancel = () => {
  emit('cancel');
};
const handleConfirm = () => {
  emit('confirm', true);
};
</script>
